<template>
    <div style="background-color: salmon">
        状态管理页面
        <h1>这个是我儿子</h1>
        <SonBoy @boy="BoyHandle"/>
        <h2>这个是我女儿</h2>
        <SonGirl  @girl="GirlHandle"/>
        <p>我儿子的成绩是{{ gradeBoy }}</p>
        <p>我女儿的成绩是{{ gradeGirl }}</p>
        <p>看看我的私房钱还有多少，哎，只剩下{{ store.money }}元了！</p>
        <p>给成绩高的发点小钱吧，<button @click.once="send(100)">奖励</button></p>
    </div>
</template>

<script>
import SonBoy from "@/components/SonBoy.vue"
import SonGirl from "@/components/SonGirl.vue"
import { useMyStore } from "@/store/mystore";

export default{
  components:{
    SonBoy,
    SonGirl
  },
  methods:{
    BoyHandle(val){
        this.gradeBoy=val
    },
    GirlHandle(val){
        this.gradeGirl=val
    },
    send(val){
        if(this.gradeBoy>this.gradeGirl && this.gradeBoy>=60){
            this.store.decrement(val),
            this.moneyBoy+=val
        }else if(this.gradeBoy<this.gradeGirl && this.gradeGirl>=60){
            this.store.decrement(val),
            this.moneyGirl+=val
        }else if(this.gradeBoy==this.gradeGirl && this.gradeGirl>=60){
            this.store.decrement(val),
            this.moneyGirl+=val/2,
            this.moneyBoy+=val/2
        }else{
            alert('考不及格还想要奖励！！！！！！')
        }
    }
  },
  data(){
    return{
        gradeBoy:'',
        gradeGirl:'',
        store:useMyStore(),
        moneyBoy:2000,
        moneyGirl:4000
    }
  }
}
</script>
